<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>Bug OCR - Demo</title>
    <link rel="stylesheet" href="css/eyelid.css" type="text/css" />
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript" src="js/protovis.js"></script>
    <script type="text/javascript" src="js/raphael-min.js"></script>
  </head>

  <body>
    <div id="wrapper">
    	<div id="header">
    		Instructions go here.
    	</div>
    	<div id="content">
    		<div id="target" >
		</div>
		
		<div id="fig">
    <script type="text/javascript+protovis">

    var w = 896,h = 586,i = 3,interpolate = "cardinal",segmented = false;
    var points1 = pv.range(1,6).map(function(i) ({ x: i * w / 5,
	y: 50 + Math.random() * (h - 100)
    }));
    
    var points2 = pv.range(1,6).map(function(i) ({ x: i * w / 5,
	y: 50 + Math.random() * (h - 100)
    }));
    
    var points3 = pv.range(1,2).map(function(i) ({ x: i * w / 5,
	y: 50 + Math.random() * (h - 100)
    }));
    
    pointset = [points1, points2,points3];
    points = pointset[0];

    var vis = new pv.Panel()
    .width(w).height(h).fillStyle("#fff").strokeStyle("#ccc").lineWidth(4)
    .antialias(false).margin(2)
    .event("mousedown", function() (i = points.push(this.mouse()) - 1, this));
    
    vis.add(pv.Image).url("images/eyeliddemo.jpg");
    
    vis.add(pv.Line)
	.data(function() points)
	.left(function(d) d.x)
	.top(function(d) d.y)
	.interpolate(function() interpolate)
	.segmented(function() segmented)
	.strokeStyle(pv.Colors.category10().by(pv.index))
	.tension(0.8)
	.lineWidth(2);

    vis.add(pv.Dot)
	.data(function() points)
	.left(function(d) d.x)
	.top(function(d) d.y)
	.radius(7)
	.cursor("move")
	.strokeStyle(function() i == this.index ? "#ff7f0e" : "#1f77b4")
	.fillStyle(function() this.strokeStyle().alpha(.2))
	.event("mousedown", pv.Behavior.drag())
	.event("dragstart", function() (i = this.index, this))
	.event("drag", vis);

    vis.render();

    pv.listen(window, "mousedown", function() self.focus());
    pv.listen(window, "keydown", function(e) {
      // code 8 is backspace, code 46 is delete
      if ((e.keyCode == 8 || e.keyCode == 46) && (i >= 0)) {
	points.splice(i--, 1);
	vis.render();
	e.preventDefault();
      }
    });

    </script>
    	</div>
    	<div id="sidebar">
    		<select onchange="points=pointset[parseInt(this.value)]; vis.render();">
		  <option value="0" selected>upperlid</option>
		  <option value="1">lowerlid</option>
		  <option value="2">center of iris</option>
		  <option value="linear">iris</option>
		</select>
    	</div>
	<div id="footer"></div>
    </div>
  </body>
</html>